---
type: tutorial
title: 布局结合，两全其美
description: |-
  教程：搭建你的 Astro 博客 -
  将基本页面布局添加到格式化博客文章的布局中
---
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

现在你已经写好了第一篇 `.md` 博客文章，是时候让它看起来和你网站上的其他页面一样了！

<PreCheck>
  - 将博客文章的布局嵌套在主页面布局内
</PreCheck>

## 嵌套两个布局

你已经有了一个名为 `BaseLayout.astro` 的文件，用于定义页面的整体布局。

`MarkdownPostLayout.astro` 为你提供了一些额外的模板，用于常见博客文章属性的格式化，例如 `title` 和 `date`，但你的博客文章看起来和网站上的其他页面不一样。你可以通过**嵌套布局**来解决。

<Steps>
1. 在 `src/layouts/MarkdownPostLayout.astro` 中导入 `BaseLayout.astro` 并将其用于包装整个模板内容，不要忘记传递 `pageTitle` 属性：

    ```astro title="src/layouts/MarkdownPostLayout.astro" ins={2,5,12}
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Written by: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

2. 在浏览器预览中查看 `http://localhost:4321/posts/post-1`。现在，你应该看到以下内容的渲染：

    - 你的**主页面布局**，包括样式、导航链接和社交页脚。
    - 你的**博客文章布局**，包括描述、日期、标题和图片等前置属性。
    - 你的**独立博客文章 Markdown 内容**，只包括此篇文章中编写的文本。

3. 注意，你的页面标题现在显示了两次，每个布局各有一次。

    从 `MarkdownPostLayout.astro` 中删除显示页面标题的行：

    ```astro title="src/layouts/MarkdownPostLayout.astro" del={2}
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Written by: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

4. 再次检查浏览器预览 `http://localhost:4321/posts/post-1`，验证该行不再显示（你的标题只显示一次）。根据需要进行其他调整，确保没有重复的内容。
</Steps>

请确保：

  - 每个博客文章都显示相同的页面模板，没有遗漏任何内容。（如果其中一篇博客文章缺少内容，请检查其前置属性。）

  - 页面上没有重复的内容。（如果某个内容被渲染了两次，请确保从 `MarkdownPostLayout.astro` 中将其删除。）

如果你想自定义页面模板，你可以这样做。

<Box icon="question-mark">

### 检验你的知识

1. 什么可以让你将一个布局嵌套在另一个布局中，并利用模块化的方式进行处理：

    <MultipleChoice>
      <Option>
        连续开发
      </Option>
      <Option>
        响应式设计
      </Option>
      <Option isCorrect>
        基于组件的设计
      </Option>
    </MultipleChoice>

2. 多个布局对于包含 Markdown 页面的项目特别有用，比如……

    <MultipleChoice>
      <Option isCorrect>
        博客
      </Option>
      <Option>
        管理面板
      </Option>
      <Option>
        聊天应用
      </Option>
    </MultipleChoice>

3. 以下哪个文件提供了所有页面的模板？

    <MultipleChoice>
      <Option>
        `index.astro`
      </Option>
      <Option isCorrect>
        `BaseLayout.astro`
      </Option>
      <Option>
        `post-1.md`
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## 任务清单

<Checklist>
- [ ] 我可以嵌套布局，检查是否有重复的元素。
</Checklist>
</Box>

### 相关资源

- [Astro 中的嵌套布局](/zh-cn/basics/layouts/#嵌套布局)
